import React, { useEffect, useState } from "react";
import "./App.css";
import { Search, Tabs, Sidebar, Toast } from "react-vant";
import axios from "axios";
interface ListRawState {
  id: string;
  title: string;
  src: string;
  children: ListRawStateChildren[];
}
interface ListRawStateChildren {
  id: string;
  title: string;
  children: ListRawStateChildrenChildren[];
}
interface ListRawStateChildrenChildren {
  id: string;
  title: string;
  word: string;
  src: string;
}
function App() {
  const [value, setValue] = useState("");
  const [list, setList] = useState<ListRawState[]>([]);
  const [active, setActive] = useState(0);
  const fetchData = async () => {
    const resp = await axios.get("/api/list");
    console.log(resp.data.list);
    setList(resp.data.list);
  };
  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div className="App">
      <div style={{ height: 54 }}>
        <Search
          value={value}
          onChange={setValue}
          align="center"
          placeholder="请输入搜索关键词"
          shape="round"
          background="#ddd"
        />
      </div>
      <div className="demo-tabs">
        <Tabs>
          {list &&
            list.map(v => {
              return (
                <Tabs.TabPane key={v.id} title={v.title}>
                  {v.children &&
                    v.children.map(v => {
                      return (
                        <Sidebar
                          value={active}
                          onChange={v => {
                            setActive(v);
                            Toast.info(`{v.title}`);
                          }}
                          key={v.id}
                        >
                          <Sidebar.Item
                            contentStyle={{
                              backgroundColor: "#fff",
                              padding: "18px 10px",
                            }}
                            title={v.title}
                          >
                            <ul>
                              <li>1</li>
                              <li>2</li>
                              <li>3</li>
                              <li>4</li>
                              <li>5</li>
                              <li>6</li>
                              <li>7</li>
                              <li>8</li>
                              <li>9</li>
                              <li>10</li>
                              <li>11</li>
                              <li>12</li>
                              <li>13</li>
                              <li>14</li>
                              <li>15</li>
                              <li>16</li>
                              <li>17</li>
                              <li>18</li>
                              <li>19</li>
                              <li>20</li>
                              <li>21</li>
                              <li>22</li>
                              <li>23</li>
                              <li>24</li>
                              <li>25</li>
                              <li>26</li>
                              <li>27</li>
                              <li>28</li>
                              <li>29</li>
                              <li>30</li>
                              <li>31</li>
                              <li>32</li>
                              <li>33</li>
                              <li>34</li>
                              <li>35</li>
                              <li>36</li>
                              <li>37</li>
                              <li>38</li>
                              <li>39</li>
                              <li>40</li>
                              <li>41</li>
                              <li>42</li>
                              <li>43</li>
                              <li>44</li>
                              <li>45</li>
                              <li>46</li>
                              <li>47</li>
                              <li>48</li>
                              <li>49</li>
                              <li>50</li>
                              <li>51</li>
                              <li>52</li>
                              <li>53</li>
                              <li>54</li>
                              <li>55</li>
                              <li>56</li>
                              <li>57</li>
                              <li>58</li>
                              <li>59</li>
                              <li>60</li>
                              <li>61</li>
                              <li>62</li>
                              <li>63</li>
                              <li>64</li>
                              <li>65</li>
                              <li>66</li>
                              <li>67</li>
                              <li>68</li>
                              <li>69</li>
                              <li>70</li>
                              <li>71</li>
                              <li>72</li>
                              <li>73</li>
                              <li>74</li>
                              <li>75</li>
                              <li>76</li>
                              <li>77</li>
                              <li>78</li>
                              <li>79</li>
                              <li>80</li>
                              <li>81</li>
                              <li>82</li>
                              <li>83</li>
                              <li>84</li>
                              <li>85</li>
                              <li>86</li>
                              <li>87</li>
                              <li>88</li>
                              <li>89</li>
                              <li>90</li>
                              <li>91</li>
                              <li>92</li>
                              <li>93</li>
                              <li>94</li>
                              <li>95</li>
                              <li>96</li>
                              <li>97</li>
                              <li>98</li>
                              <li>99</li>
                              <li>100</li>
                            </ul>
                            {/* <div className="box">
                              {v.children &&
                                v.children.map(v => {
                                  return (
                                    <div key={v.id}>
                                      <dl>
                                        <dt>
                                          <img src={v.src} alt="" />
                                        </dt>
                                        <dd>
                                          <p>{v.word}</p>
                                          <h3>{v.title}</h3>
                                        </dd>
                                      </dl>
                                    </div>
                                  );
                                })}
                            </div> */}
                          </Sidebar.Item>
                        </Sidebar>
                      );
                    })}
                </Tabs.TabPane>
              );
            })}
        </Tabs>
      </div>
    </div>
  );
}

export default App;
